<template >
  <div>
     <div ref="chartDom" style="width: 600px; height: 600px;"> </div>
  </div>
</template>
<script setup>
import * as echarts from 'echarts'
import {onMounted,ref,defineProps,watch} from 'vue'
import mitt from '@/utils/mitt'
let chartDom=ref(null) //获取的dom

// 选中的图像的option
let props=defineProps({
  selCode:{
    type:String,
    default:''
  }
})
// 监听父传子的code 也是图像生成需要option
watch(()=>props.selCode,(newVal,oldVal)=>{
  // 
  console.log(newVal,"---------")
       makeChart(JSON.parse(newVal))
})
// 兄弟组件传来的编辑器的值 接受到从新生成图表
 mitt.on('codeChange',(code)=>{
    makeChart(JSON.parse(code))
 })
let makeChart=(option)=>{
  // 获取echarts操作实例
  let charts= echarts.init(chartDom.value)
 
  // 准备一个option
  // let option = {
  //   title: {
  //     text: 'ECharts 入门示例'
  //   },
  //   tooltip: {},
  //   legend: {
  //     data:['销量']
  //   },
  //   xAxis: {
  //     data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
  //   },
  //   yAxis: {},
  //   series: [{
  //     name: '销量',
  //     type: 'bar',
  //     data: [5, 20, 36, 10, 10, 20]
  //   }]
  // };

  // 使用刚指定的配置项和数据显示图表。
  charts.setOption(option);
  
}
onMounted(() => {

});

  
</script>
<style scoped lang="scss">
</style>